// New Carousel Styles with react-transition-group
.carousel-container {
  position: relative;
  height: 106px;  // BANNER_HEIGHT + 6px
  width: 100%;
}

.carousel-cards-wrapper {
  position: relative;
  height: 100px;  // BANNER_HEIGHT
  width: 100%;
}

// Card Layout & Spacing Specifications (Button spec)
.carousel-card {
  width: 100%;  // Screen width - 16px left and right margin (provided by container)
  height: 100px;
  border-radius: 12px;
  border: 1px solid var(--color-border-muted);
  background: var(--color-background-default);
  padding: 12px; // Adjusted top/bottom padding to fit 72px content
  padding-left: 16px;
  position: absolute;
  overflow: hidden;
  left: 0;
  right: 0;
  align-items: center;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  gap: 16px; // 16px gap as per spec

  &:hover {
    background: var(--color-background-default-hover);
  }

  &:active {
    background: var(--color-background-default-pressed);
  }
}

// Current Card (Active/Top Layer)
.carousel-card--current {
  top: 0;
  z-index: 2;
  opacity: 1;
  transform: scale(1) translateY(0);
}

// Next Card (Background Layer)
.carousel-card--next {
  top: 6px; // Slight offset to show stacking
  z-index: 1;
  opacity: 0.7;
  transform: scale(0.96) translateY(6px);
}

.carousel-card__pressed-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-background-default-hover);
  border-radius: 12px;
  opacity: 1;
  pointer-events: none;
}

// Image Container (72px x 72px as per original spec)
.carousel-card__image {
  width: 72px;
  height: 72px;
  border-radius: 12px;
  background: var(--color-background-muted); // Background as per spec
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.carousel-card__image img {
  width: 72px;
  height: 72px;
  object-fit: contain;
}

// Info container (Text Content Area)
.carousel-card__text {
  flex: 1; // Fill up remaining width
  display: flex;
  flex-direction: column;
  height: 72px; // Match image height as per spec
  justify-content: flex-start;
  min-width: 0; // Allow flex item to shrink properly
}

// Title and close button container (24px header box)
.carousel-card__text-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 24px; // 24px header box as per spec
  min-width: 0;
  overflow: visible; // Allow 28px button to overflow 2px top/bottom
}

// Description Text container
.carousel-card__text-body {
  margin-top: 4px; // 4px margin top as per spec
}

// Typography handled by Text components from design system
.carousel-card__title {
  flex: 1; // Allow title to take available space
  min-width: 0; // Allow flex item to shrink below content size
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.carousel-card__description {
  // stylelint-disable-next-line value-no-vendor-prefix
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  width: 100%;
  word-wrap: break-word;
}

// Close Button: Using ButtonIcon component from design system
// No custom styling needed - ButtonIcon handles all styling

// Empty State Content (inside carousel-card)
.carousel-empty-state {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

// Text styling handled by Text component from design system
.carousel-empty-state__text {
  text-align: center;
}

// Animation Specifications (react-transition-group)

// Card Exit Animation (300ms - slowed by 50ms)
.card-exit {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.card-exit-active {
  opacity: 0;
  transform: scale(1.015) translateY(-6px);
  transition: all 300ms ease-in-out;
}

// Card Enter Animation (250ms - slowed by 50ms)
.card-enter {
  opacity: 0.7;
  transform: scale(0.96) translateY(6px);
}

.card-enter-active {
  opacity: 1;
  transform: scale(1) translateY(0);
  transition: all 250ms ease-in-out 100ms; // 100ms delay (slowed by 50ms)
}

// Next Card Fade-In (250ms - slowed by 50ms)
.next-card-enter {
  opacity: 0;
}

.next-card-enter-active {
  opacity: 0.7;
  transition: opacity 250ms ease-in-out;
}

// Empty State Fold-Up Animation (when shown as standalone component)
.empty-state-exit {
  opacity: 1;
  transform: scaleY(1);
  height: 106px; // Match carousel-container height
}

.empty-state-exit-active {
  opacity: 0;
  transform: scaleY(0);
  height: 0;
  transition:
    opacity 200ms ease-in-out,
    height 300ms ease-in-out,
    transform 200ms ease-in-out 50ms;
  transform-origin: bottom;
  overflow: hidden;
}

// Legacy styles for backward compatibility during transition
.mm-carousel {
  height: 106px;
}

.mm-carousel--single-slide {
  height: 106px;
}
